<template>
	<view class="content">
		<view class="single" :class="{ active: index % 2 != 1 }" v-for="(item,index) in hoteList" :key="index"
			@click="callPhone(item.dictInfoValue)">
			<text class="lable">{{ item.targetValue }}</text>
			<text class="phone">{{ item.dictInfoValue }}</text>
		</view>
		<view class="noMore" v-if="!total">
			<image src="/static/imges/data.png" mode="widthFix"></image>
			- 暂无数据 -
		</view>
	</view>
</template>

<script lang="ts">
	// @ts-nocheck
	import Vue from 'vue';
	import { getDictAll } from "../../api/common/dict";
	export default Vue.extend({
		data() {
			return {
				hoteList: [],
				total: 0,
			}
		},
		onShow() {
			this.getHoteLine();
		},
		methods: {
			// 获取热线电话
			async getHoteLine() {
				const params = {
					dictCode: 'hot_line'
				}
				const data = await getDictAll(params)
				this.hoteList = data;
				this.total = data.length;
				console.log(data, '获取首页轮播图')
			},
			//  拨打电话
			callPhone(phone : any) {
				uni.makePhoneCall({
					phoneNumber: phone
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				});
			}
		}
	})
</script>

<style scoped lang="scss">
	.content {
		padding-top: 20rpx;
	}

	.single {
		width: 100%;
		height: 90rpx;
		border-bottom: 2rpx solid #f3f3f3;
		// margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		.lable {
			width: 40%;
			text-align: center;
		}

		.phone {
			width: 60%;
			text-align: center;
			color: #0C77FB;
		}

	}

	.active {
		background: #fff0e1;
	}

	.noMore {
		font-size: 28rpx;
		font-weight: 500;
		color: #9F9F9F;
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: column;

		image {
			width: 400rpx;
		}
	}
</style>